<template>
  <div>
    <DxPopup
      :visible="isShow"
      :drag-enabled="false"
      :show-close-button="false"
      :show-title="true"
      :width="500"
      height="250"
      container=".dx-viewport"
      title="厂牌信息管理"
    >
      <DxForm
        :minColWidth="300"
        :read-only="false"
        label-location="left"
        :col-count="1"
        
        :ref="'editFormRef'"
      >
        <DxGroupItem :col-count="1">
          <DxSimpleItem data-field="">
            <DxLabel text="批准文号"></DxLabel>
            <DxTextBox styling-mode="outlined" />
          </DxSimpleItem>
        </DxGroupItem>

        <DxGroupItem :col-count="2">
          <DxSimpleItem data-field="">
            <DxLabel text="厂牌名称" />
            <DxTextBox styling-mode="outlined" />
          </DxSimpleItem>
          <DxSimpleItem data-field="">
            <DxLabel text="状态" />
            <DxSelectBox :items="simpleProducts" stylingMode="outlined" />
          </DxSimpleItem>
        </DxGroupItem>
      </DxForm>
      <div style="text-align: right;">
            <el-button size="mini" plain @click="butcancel">取消</el-button>
            <el-button size="mini" type="primary" plain @click="butsaveexit">确定</el-button>
      </div>
    </DxPopup>
  </div>
</template>

<script lang="ts">
export interface TabsData {
  id?: string;
  text?: string;
}
import { DxScrollView } from "devextreme-vue/scroll-view";
import { DxPopup, DxPosition, DxToolbarItem } from "devextreme-vue/popup";
import { Options, Vue } from "vue-class-component";
import { Emit, Prop } from "vue-property-decorator";
import DxTabPanel from "devextreme-vue/tab-panel";
import DxSelectBox from "devextreme-vue/select-box";
import DxForm from "devextreme-vue/form";
import { ElCol, ElRow, ElButton } from "element-plus";
import dxFormSimpleItem, {
  DxForm as Form,
  DxItem,
  DxRequiredRule,
  DxPatternRule,
  DxGroupItem,
  DxSimpleItem,
  DxLabel,
  DxButtonItem,
  DxRangeRule,
} from "devextreme-vue/form";

import DxTextBox from "devextreme-vue/text-box";
import DxButton from "devextreme-vue/button";
import { DxCheckBox } from "devextreme-vue/check-box";
import CollectionWidget from "devextreme/ui/collection/ui.collection_widget.base";
import { watch } from "vue";
@Options({
  components: {
    DxScrollView,
    DxCheckBox,
    ElCol,
    ElRow,
    DxTextBox,
    DxForm,
    dxFormSimpleItem,
    Form,
    DxButton,
    DxItem,
    DxRequiredRule,
    DxPatternRule,
    DxGroupItem,
    DxSimpleItem,
    DxLabel,
    DxButtonItem,
    DxRangeRule,
    DxSelectBox,
    DxTabPanel,
    DxPopup,
    DxPosition,
    ElButton,
    DxToolbarItem,
  },
})
export default class Edit extends Vue {
  @Prop()
  isShow: boolean;

  @Emit("cancel")
  cancel() {}

  @Emit("saveexit")
  saveexit() {}

  @Emit("saveadd")
  saveadd() {}

  butcancel() {
    this.cancel();
  }
  butsaveexit() {
    this.saveexit();
  }
  butsaveadd() {
    this.saveadd();
  }
}
</script>
<style lang="scss">
.tabitem {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
}
.tabitem > div {
  margin-top: 20px;
  display: flex;
}
span {
  line-height: 30px;
  margin-left: 5px;
  margin-right: 5px;
}
.buttom-button {
  display: flex;
  justify-content: flex-end;
  margin: 20px;
}
.buttom-button > div > div {
  margin: 10px;
}
</style>
